<template>
  <div>
    <div id="navbar">
      <div class="lww_header">
        <div class="header_wrap">
          <div class="header_logo">
            <a href="javascript:;" class="lww_logo"></a>
          </div>
          <ul class="header_nav">
            <li  @click="backHome"><a>首页</a></li>
            <li  class="header_nav_active">
              <a @click="backDestination">目的地</a>
            </li>
            <li >
              <a @click="toStrategyIndex()">旅游攻略</a>
            </li>
            <li ><a >旅游日记</a></li>
            <li >
              <a href="javascript:;">去旅行<i class="icon_caret_down"></i></a>
            </li>
            <li >
              <a href="javascript:;">社区<i class="icon_caret_down"></i></a>
            </li>
          </ul>
          <div class="header_search">
            <input type="text" />
            <a class="icon_search"></a>
          </div>
          <div class="login_info" style="display: none" v-show="ShowLogin">
            <div class="head_user">
              <a >
                <img
                  src="../assets/images/default.jpg"
                  id="login_user_headUrl"
                />
                <i class="icon_caret_down"></i>
                <span style="font-size: 14px; float: right" @click="signOut()">
                  退出
                </span>
              </a>
            </div>
            <div class="header_msg">消息<i class="icon_caret_down"></i></div>
            <div class="header_daka">
              <a href="javascript:;">打卡</a>
            </div>
          </div>
          <div class="login-out" v-show="!ShowLogin">
            <a
              class="weibo-login"
              href="./destination_detail.html?id=5e2ab4f48847000059006f11#"
              title="微博登录"
              rel="nofollow"
            ></a>
            <a
              class="qq-login"
              href="./destination_detail.html?id=5e2ab4f48847000059006f11#"
              title="QQ登录"
              rel="nofollow"
            ></a>
            <a
              class="weixin-login"
              href="./destination_detail.html?id=5e2ab4f48847000059006f11#"
              title="微信登录"
              rel="nofollow"
            ></a>
            <a
              id="_j_showlogin"
              title="登录骡窝窝"
              href="./login.html"
              rel="nofollow"
              @click="toLogin()"
              >登录</a
            >
            <span class="split">|</span>
            <a  title="注册帐号" rel="nofollow">注册</a>
          </div>
        </div>
        <div class="shadow"></div>
      </div>
    </div>
    <div id="app">
      <div id="container">
        <div class="row row-placeTop row-bg">
          <div class="wrapper">
            <div class="extra">
              <div class="action">
                <a
                  href="javascript:void(0)"
                  _iswg="0"
                  _mddid="14674"
                  data-act="want_go"
                  class="btn-collect"
                  >收藏</a
                >
                <a
                  href="javascript:void(0)"
                  _ispa="0"
                  _mddid="14674"
                  data-act="set_path"
                  class="btn-been"
                  ><i class="icon"></i>去过</a
                >
              </div>
            </div>


















            <div class="crumb" >
              <div class="item">
                <a @click="backDestination" >目的地</a><em>&gt;</em>
              </div>
              <!-- 吐司 -->
              <div class="item"> {{toastList[0].name}}</a
                ><em>&gt;</em>
              </div>
              <div class="item"> {{toastList[1].name}}</a
                ><em>&gt;</em>
              </div>
            
              <div class="item">
                <div class="drop" >
                  <span class="hd" v-if="toastList.length ===2?false:true"><a href="javascript:;" >{{toastList[2].name}}<i></i></a></span>
                  <div class="bd">
                    <i class="arrow"><b></b></i>
                    <div class="col">
                      <ul class="clearfix">
                        <li>
                          <a href="JavaScript:;" target="_blank">{{toastList[2].name}}概括</a>
                        </li>
                        <li>
                          <a
                           
                            target="_blank"
                            >{{toastList[2].name}}游记</a
                          >
                        </li>
                        <li>
                          <a
                            
                            target="_blank"
                            >{{toastList[2].name}}攻略</a
                          >
                        </li>
                        <li>
                          <a href="javascript:;" target="_blank"
                            >{{toastList[2].name}}跟团游</a
                          >
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <em>&gt;</em>
              </div>
              <div class="item cur"><strong>{{toastList[2].name}}概览</strong></div>
            </div>

            <div class="title" style="position: relative ">
              <h1 style="margin-right:720px">{{toastList[2].name}}</h1>
              <a href="javascript:;" target="_blank" class="num-photo">{{toastList[2].english}}</a>
              <br />
              <span class="en">{{toastList[2].english}}</span>
              <div style="position: absolute; top: 3px; right: 220px">
                <img
                  src="../assets/images/wKgED1v-df2Ab5KFAAFioLPYatQ535.png"
                  style="width: 390px"
                />
              </div>
            </div>
            <div class="place-navbar" style="border-top: 0px">
              <div class="navbar-con">
                <ul class="navbar clearfix navbar-first-level-warper">
                  <li class="navbar-overview city-guide">
                    <a href="javascript:;" class="navbar-btn"
                      ><i class="navbar-icon"></i><span>概况</span></a
                    >
                  </li>
                  <li class="navbar-line">
                    <a
                      
                      class="navbar-btn"
                      ><i class="navbar-icon"></i><span>游记</span></a
                    >
                  </li>
                  <li class="navbar-line">
                    <a
                      
                      class="navbar-btn navbar-local"
                      ><i class="navbar-icon"></i><span>攻略</span></a
                    >
                  </li>
                  <li class="navbar-line">
                    <a href="javascript:;" class="navbar-btn navbar-sales"
                      ><i class="navbar-icon"></i><span>跟团游</span></a
                    >
                  </li>
                </ul>
                <div
                  class="overview-drop hide"
                  style="height: auto; overflow: hidden"
                >
                  <div class="drop-bd"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pagelet-block">
          <div class="row row-local row-bg">
            <div class="wrapper">
              <h2 class="r-title">
                <a href="javascript:;" name="strategy">{{toastList[2].name}}攻略</a>
              </h2>
              <div class="local-pro">
                <ul class="clearfix"></ul>
              </div>
              <div class="r-more">
                <a href="./strategy_index.html" target="_blank">查看全部</a>
              </div>
            </div>
          </div>
        </div>
        <div class="pagelet-block">
          <div class="row row-travels">
            <div class="wrapper">
              <div class="navbar clearfix">
                <ul class="tn-nav">
                  <li class="active">
                    <h2 class="r-title">
                      <a href="javascript:;" name="travel">{{toastList[2].name}}游记</a>
                    </h2>
                  </li>
                </ul>
              </div>
              <div class="relcontent yj" style="display: block">
                <form id="travelForm">
                  <div class="navbar-sub clearfix">
                    排序：
                    <select name="orderType" class="com-opt">
                      <option value="1">最新</option>
                      <option value="2">最热</option>
                    </select>

                    人均花费：
                    <select name="perExpendType" class="com-opt">
                      <option value="-1">不限</option>
                      <option value="1">1-999</option>
                      <option value="2">1K-6K</option>
                      <option value="3">6K-20K</option>
                      <option value="4">20K以上</option>
                    </select>

                    出行天数：
                    <select name="dayType" class="com-opt">
                      <option value="-1">不限</option>
                      <option value="1">3天以下</option>
                      <option value="2">4-7天</option>
                      <option value="3">8-14天</option>
                      <option value="4">15天以上</option>
                    </select>
                  </div>
                </form>
                <div class="_notelist">
                  <div id="travelPage" class="tn-list">
                    <br /><br />
                    <div style="float: right">
                      <div style="float: left">
                        <span style="line-height: 30px">
                          共1页 / 0条&nbsp;&nbsp;&nbsp;</span
                        >
                      </div>
                      <div
                        id="pagination"
                        class="jq-pagination"
                        style="display: inline"
                      >
                        <a
                          class="prev disabled"
                          href="javascript:void(0);"
                          jp-role="prev"
                          jp-data="0"
                          >上一页</a
                        ><a
                          href="javascript:void(0);"
                          jp-role="page"
                          jp-data="1"
                          class="active"
                          >1</a
                        ><a
                          class="next disabled"
                          href="javascript:void(0);"
                          jp-role="next"
                          jp-data="2"
                          >下一页</a
                        ><a
                          class="last disabled"
                          href="javascript:void(0);"
                          jp-role="last"
                          jp-data="1"
                          >尾页</a
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pagelet-block">
          <div class="row row-placeList">
            <div class="wrapper">
              <h2 class="r-title">{{toastList[2].name}}周边【拓展】</h2>
              <div class="bd">
                <ul class="clearfix">
                  <li class="item">
                    <div class="img">
                      <img
                        height="200"
                        width="320"
                        src="../assets/images/wKgB3FGMgSCAZo0qAAgGckFTqJA54.jpeg"
                        class="lazy"
                        style="display: inline"
                      />
                    </div>
                    <dl class="caption">
                      <dt>
                        <a href="javascript:;" target="_blank"
                          ><strong>香港</strong><br /><b>40576</b>人去过</a
                        >
                      </dt>
                      <dd>
                        <a href="javascript:;" target="_blank"
                          >香港迪士尼乐园</a
                        >
                        <span class="divide"></span>
                        <a href="javascript:;" target="_blank">太平山顶</a>
                        <span class="divide"></span>
                        <a href="javascript:;" target="_blank">香港海洋公园</a>
                      </dd>
                    </dl>
                  </li>
                  <li class="item">
                    <div class="img">
                      <a href="javascript:;" target="_blank"
                        ><img
                          height="200"
                          width="320"
                          src="../assets/images/wKgB3FECAVCANTk_AAWNVF8sjYw25.jpeg"
                          class="lazy"
                          style="display: inline"
                      /></a>
                    </div>
                    <dl class="caption">
                      <dt>
                        <a href="javascript:;" target="_blank"
                          ><strong>深圳</strong><br /><b>33108</b>人去过</a
                        >
                      </dt>
                      <dd>
                        <a href="javascript:;" target="_blank">东部华侨城</a>
                        <span class="divide"></span>
                        <a href="javascript:;" target="_blank">西涌海滩</a>
                        <span class="divide"></span>
                        <a href="javascript:;" target="_blank">世界之窗</a>
                      </dd>
                    </dl>
                  </li>
                  <li class="item">
                    <div class="img">
                      <a href="javascript:;" target="_blank"
                        ><img
                          height="200"
                          width="320"
                          src="../assets/images/wKgB6lP0VpCADPDPAAPICO-I-Iw57.jpeg"
                          class="lazy"
                          style="display: inline"
                      /></a>
                    </div>
                    <dl class="caption">
                      <dt>
                        <a href="javascript:;" target="_blank"
                          ><strong>珠海</strong><br /><b>17660</b>人去过</a
                        >
                      </dt>
                      <dd>
                        <a href="javascript:;" target="_blank"
                          >珠海长隆海洋王国</a
                        >
                        <span class="divide"></span>
                        <a href="javascript:;" target="_blank">外伶仃岛</a>
                        <span class="divide"></span>
                        <a href="javascript:;" target="_blank">情侣路</a>
                      </dd>
                    </dl>
                  </li>
                  <li class="item">
                    <div class="img">
                      <a href="javascript:;" target="_blank"
                        ><img
                          height="200"
                          width="320"
                          src="../assets/images/wKgB4lIlVk6AIMCDAAStueA6sSU73.jpeg"
                          class="lazy"
                          style="display: inline"
                      /></a>
                    </div>
                    <dl class="caption">
                      <dt>
                        <a href="javascript:;" target="_blank"
                          ><strong>惠州</strong><br /><b>7214</b>人去过</a
                        >
                      </dt>
                      <dd>
                        <a href="javascript:;" target="_blank">双月湾</a>
                        <span class="divide"></span>
                        <a href="javascript:;" target="_blank">巽寮湾</a>
                        <span class="divide"></span>
                        <a href="javascript:;" target="_blank">惠州西湖</a>
                      </dd>
                    </dl>
                  </li>
                  <li class="item">
                    <div class="img">
                      <a href="javascript:;" target="_blank"
                        ><img
                          height="200"
                          width="320"
                          src="../assets/images/wKgB6lRZ5s6ARJzuAAjCwdIPcK865.jpeg"
                          class="lazy"
                          style="display: inline"
                      /></a>
                    </div>
                    <dl class="caption">
                      <dt>
                        <a href="javascript:;" target="_blank"
                          ><strong>佛山</strong><br /><b>9649</b>人去过</a
                        >
                      </dt>
                      <dd>
                        <a href="javascript:;" target="_blank">顺德清晖园</a>
                        <span class="divide"></span>
                        <a href="javascript:;" target="_blank">佛山祖庙</a>
                        <span class="divide"></span>
                        <a href="javascript:;" target="_blank">岭南天地</a>
                      </dd>
                    </dl>
                  </li>
                  <li class="item">
                    <div class="img">
                      <a href="javascript:;" target="_blank"
                        ><img
                          height="200"
                          width="320"
                          src="../assets/images/wKgB3FIMRvaAdrjoAAGCmIetJvQ75.jpeg"
                          class="lazy"
                          style="display: inline"
                      /></a>
                    </div>
                    <dl class="caption">
                      <dt>
                        <a href="javascript:;" target="_blank"
                          ><strong>韶关</strong><br /><b>6248</b>人去过</a
                        >
                      </dt>
                      <dd>
                        <a href="javascript:;" target="_blank">丹霞山</a>
                        <span class="divide"></span>
                        <a href="javascript:;" target="_blank">广东大峡谷</a>
                        <span class="divide"></span>
                        <a href="javascript:;" target="_blank">南华禅寺</a>
                      </dd>
                    </dl>
                  </li>
                  <li class="item">
                    <div class="img">
                      <a href="javascript:;" target="_blank"
                        ><img
                          height="200"
                          width="320"
                          src="../assets/images/wKgB4lMO9uuAbh9fAAKP4vgV8Os70.jpeg"
                          class="lazy"
                          style="display: inline"
                      /></a>
                    </div>
                    <dl class="caption">
                      <dt>
                        <a href="javascript:;" target="_blank"
                          ><strong>东莞</strong><br /><b>10353</b>人去过</a
                        >
                      </dt>
                      <dd>
                        <a href="javascript:;" target="_blank">下坝坊</a>
                        <span class="divide"></span>
                        <a href="javascript:;" target="_blank">松山湖风景区</a>
                        <span class="divide"></span>
                        <a href="javascript:;" target="_blank">可园博物馆</a>
                      </dd>
                    </dl>
                  </li>
                  <li class="item">
                    <div class="img">
                      <a href="javascript:;" target="_blank"
                        ><img
                          height="200"
                          width="320"
                          src="../assets/images/wKgB4lMNziCASS7YAADtzNGSAUU44.jpeg"
                          class="lazy"
                          style="display: inline"
                      /></a>
                    </div>
                    <dl class="caption">
                      <dt>
                        <a href="javascript:;" target="_blank"
                          ><strong>中山</strong><br /><b>8276</b>人去过</a
                        >
                      </dt>
                      <dd>
                        <a href="javascript:;" target="_blank"
                          >孙中山故居纪念馆</a
                        >
                        <span class="divide"></span>
                        <a href="javascript:;" target="_blank"
                          >中山城-中山影视城</a
                        >
                        <span class="divide"></span>
                        <a href="javascript:;" target="_blank">中山詹园</a>
                      </dd>
                    </dl>
                  </li>
                  <li class="item">
                    <div class="img">
                      <a href="javascript:;" target="_blank"
                        ><img
                          height="200"
                          width="320"
                          src="../assets/images/wKgBEFqTegaAGG-GAAgeDCxhmAQ61.jpeg"
                          class="lazy"
                          style="display: inline"
                      /></a>
                    </div>
                    <dl class="caption">
                      <dt>
                        <a href="javascript:;" target="_blank"
                          ><strong>肇庆</strong><br /><b>8276</b>人去过</a
                        >
                      </dt>
                      <dd>
                        <a href="javascript:;" target="_blank">肇庆大山</a>
                        <span class="divide"></span>
                        <a href="javascript:;" target="_blank">肇庆影视城</a>
                        <span class="divide"></span>
                        <a href="javascript:;" target="_blank">詹园</a>
                      </dd>
                    </dl>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer" id="footer">
      <div class="ft-content" style="width: 1105px">
        <div class="ft-info clearfix">
          <dl class="ft-info-col ft-info-intro">
            <dt>骡窝窝旅游网</dt>
            <dd>
              叩丁狼是一家专注于培养高级IT技术人才，为学员提供定制化IT职业规划方案及
            </dd>
            <dd>
              意见咨询服务的教育科技公司，为您提供海量优质课程，以及创新的线上线下学
            </dd>
            <dd>习体验，帮助您获得全新的个人发展和能力提升。</dd>
          </dl>
          <dl class="ft-info-col ft-info-qrcode">
            <dd>
              <span class="ft-qrcode-tejia"></span>
            </dd>
            <dd>
              <span class="ft-qrcode-weixin"></span>
            </dd>
            <dd>
              <span
                class="ft-qrcode-weixin"
                style="background-image: url(../assets/images/qrcode.jpg&#39;)"
              ></span>
            </dd>
          </dl>
          <dl class="ft-info-social">
            <dt>向崇尚自由的加勒比海盗致敬！</dt>
            <dd>
              <a
                class="ft-social-weibo"
                target="_blank"
                href="javascript:;"
                rel="nofollow"
                ><i class="ft-social-icon"></i
              ></a>
              <a
                class="ft-social-qqt"
                target="_blank"
                href="javascript:;"
                rel="nofollow"
                ><i class="ft-social-icon"></i
              ></a>
              <a
                class="ft-social-qzone"
                target="_blank"
                href="javascript:;"
                rel="nofollow"
                ><i class="ft-social-icon"></i
              ></a>
            </dd>
          </dl>
        </div>

        <div class="ft-links">
          <a target="_blank" href="http://china.makepolo.com/">马可波罗</a
          ><a target="_blank" href="http://www.onlylady.com/">Onlylady女人志</a
          ><a target="_blank" href="http://trip.elong.com/">艺龙旅游指南</a
          ><a target="_blank" href="http://www.cncn.com/">欣欣旅游网</a>
          <a target="_blank" href="http://www.8264.com/">户外运动</a
          ><a target="_blank" href="http://www.yue365.com/">365音乐网</a
          ><a target="_blank" href="http://ishare.iask.sina.com.cn/"
            >爱问共享资料</a
          ><a target="_blank" href="http://www.uzai.com/">旅游网</a>
          <a target="_blank" href="http://www.zongheng.com/">小说网</a>
          <a target="_blank" href="http://www.xuexila.com/">学习啦</a
          ><a target="_blank" href="http://www.yododo.com/">游多多自助游</a
          ><a target="_blank" href="http://www.zhcpic.com/">问答</a
          ><a target="_blank" href="http://huoche.mafengwo.cn/">火车时刻表</a>
          <a target="_blank" href="http://www.lvmama.com/">驴妈妈旅游网</a>
          <a target="_blank" href="http://www.haodou.com/">好豆美食网</a
          ><a target="_blank" href="http://www.taoche.com/">二手车</a
          ><a target="_blank" href="http://www.lvye.cn/">绿野户外</a
          ><a target="_blank" href="http://www.tuniu.com/">途牛旅游网</a>
          <a target="_blank" href="http://www.mapbar.com/">图吧</a>
          <a target="_blank" href="http://www.chnsuv.com/">SUV联合越野</a
          ><a target="_blank" href="http://www.uc.cn/">手机浏览器</a
          ><a target="_blank" href="http://sh.city8.com/">上海地图</a
          ><a target="_blank" href="http://www.tianqi.com/">天气预报查询</a>
          <a target="_blank" href="http://www.ly.com/">同程旅游</a>
          <a target="_blank" href="http://www.tieyou.com/">火车票</a
          ><a target="_blank" href="http://www.yunos.com/">YunOS</a
          ><a target="_blank" href="http://you.ctrip.com/">携程旅游</a
          ><a target="_blank" href="http://www.jinjiang.com/">锦江旅游</a>
          <a target="_blank" href="http://www.huoche.net/">火车时刻表</a>
          <a target="_blank" href="http://www.tripadvisor.cn/">TripAdvisor</a
          ><a target="_blank" href="http://www.tianxun.com/">天巡网</a
          ><a target="_blank" href="http://www.mayi.com/">短租房</a
          ><a target="_blank" href="http://www.zuzuche.com/">租租车</a>
          <a target="_blank" href="http://www.5fen.com/">五分旅游网</a>
          <a target="_blank" href="http://www.zhuna.cn/">酒店预订</a
          ><a target="_blank" href="http://www.ailvxing.com/">爱旅行网</a
          ><a target="_blank" href="http://360.mafengwo.cn/all.php">旅游</a
          ><a target="_blank" href="http://vacations.ctrip.com/">旅游网</a>
          <a target="_blank" href="http://www.wed114.cn/">wed114结婚网</a>
          <a target="_blank" href="http://www.chexun.com/">车讯网</a
          ><a target="_blank" href="http://www.aoyou.com/">遨游旅游网</a
          ><a target="_blank" href="http://www.91.com/">手机</a>
          <a href="javascript:;" target="_blank">更多友情链接&gt;&gt;</a>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import { ApiToasts } from "@/request/api";
import { mapMutations, mapState } from "vuex";

export default {
  data() {
    return {
      toastList: [],
    };
  },
  async created() {
    let id = this.$route.query.id;
    let res = await ApiToasts(id);
    this.toastList = res.data;
    console.log(res);
  },
  computed: {
    ...mapState({
      ShowLogin: (state) => state.Login.isShow,
    }),
  },
  methods: {
    ...mapMutations({
      isShowLogin: "Login/changIsShow",
    }),
    backHome() {
      this.$router.push({
        path: "/",
      });
    },
    backDestination() {
      this.$router.push({
        path: "/destination",
      });
    },
    toStrategyIndex() {
      this.$router.push({
        path: "/strategy",
      });
    },
    toLogin() {
      this.$router.push({
        path: "/login",
      });
    },
    // 退出按钮
    signOut() {
      localStorage.removeItem("x-authorization");
      this.isShowLogin(false);
    },
  },
};
</script>

<style scoped>
@import "@/assets/css/travelspot.css";
@import "@/assets/css/select.css";
@import "@/assets/css/jqPagination.css";
</style>